<template>
  <div class="login_register">
    <!-- 顶部 -->
    <van-nav-bar title="注册">
      <span slot="left" @click="$router.go(-1)">
        <i slot="icon" class="iconfont icon-zhiyuanfanhui17"></i>
      </span>
    </van-nav-bar>

    <!-- 内容部分 -->
    <div class="content">
      <van-cell-group>
        <van-field
          v-model="userInfo.username"
          placeholder="请输入用户名"
        />
        <van-field
          v-model="userInfo.mobile"
          placeholder="请输入手机号"
        />

        <van-field
          v-model="userInfo.password"
          :type="passType"
          right-icon="eye-o"
          placeholder="请输入密码"
          @click-right-icon="showPass"
        />
        <van-field
          v-model="surePass"
          :type="passType"
          right-icon="eye-o"
          placeholder="确认密码"
          @click-right-icon="showPass"
        />
         <van-field
          v-model="userInfo.vCode"
          placeholder="认证码"
        >
          <van-button slot="button" @click="getVcode">获取验证码</van-button>
        </van-field>
      </van-cell-group>
      <van-button size="large" class="change1" @click="registerUser">注册</van-button>
      <input type="checkbox" checked>我同意《会员服务协议》
      <span class="register" @click="jumpToLogin">立即登录</span>
    </div>
    <!-- 底部标签页 -->
    <van-tabbar v-model="active" active-color="#ff8c00">
      <van-tabbar-item icon="home-o" @click="jumpToHome">首页</van-tabbar-item>
      <van-tabbar-item>
        <i slot="icon" class="iconfont icon-caidan1" @click="jumpToCate"></i>分类
      </van-tabbar-item>
      <van-tabbar-item>
        <i slot="icon" class="iconfont icon-ai-cart"></i>购物车
      </van-tabbar-item>
      <van-tabbar-item>
        <i slot="icon" class="iconfont icon-huiyuan21" @click="jumpToInfo"></i>会员中心
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { register, vcode } from '@/api'
export default {
  data () {
    return {
      active: -1,
      userInfo: {
        mobile: '',
        username: '',
        password: '',
        vCode: ''
      },
      surePass: '', // 确认密码
      passType: 'password' // 密码框的显示类型
    }
  },
  methods: {
    // 获取验证码
    getVcode () {
      vcode()
        .then(res => {
          console.log(res.data.vCode)
        })
    },
    // 注册用户
    registerUser () {
      console.log(this.userInfo.password, this.surePass)
      if (this.userInfo.password !== this.surePass) {
        this.$toast.fail('两次密码输入不一致')
      } else {
        register(this.userInfo)
          .then(res => {
            console.log(res)
            if (res.data.success) {
              this.$toast.success('注册成功')
              this.jumpToHome()
            } else {
              this.$toast.fail(res.data.message)
            }
          })
      }
    },
    showPass () {
      if (this.passType === 'text') {
        this.passType = 'password'
      } else {
        this.passType = 'text'
      }
    },
    jumpToCate () {
      this.$router.push({ name: 'category' })
    },
    jumpToHome () {
      this.$router.push({ name: 'home' })
    },
    jumpToInfo () {
      this.$router.push({ name: 'userinfo' })
    },
    jumpToLogin () {
      this.$router.push({ name: 'login' })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
      background-color: #006699;
      .van-nav-bar__title {
        color: #fff;
        font-size: 17px;
        font-weight: blod;
      }
      .icon-zhiyuanfanhui17 {
        color: #fff;
        font-size: 17px;
      }
}
.content{
  padding: 10px;
  .van-button--default{
    background-color: #007aff;
    color:#fff;
    height: 40px;
    width: 120px;
    line-height: 40px;
    font-size: 16px;
  }
  .change1{
    width: 360px;
    margin: 20px 0;
  }
  .register{
    float: right;
    color: #007aff;
    font-size: 14px;
    margin-top: 10px;
  }
}
//底部标签页
.van-hairline--top-bottom {
  background-color: #006699;
  .van-tabbar-item {
    color: #fff;
  }
}

</style>
